<!--  -->
<template>
  <div class="verify">
    <slide-verify
      :l="verify.l"
      :r="verify.r"
      :w="verify.w"
      :h="verify.h"
      :slider-text="text"
      :accuracy="accuracy"
      @fulfilled="onFulfilled"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
    <div class="tip">{{ msg }}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  props: ['verify'],
  data() {
    return {
      msg: '',
      text: '向右滑',
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 5
    }
  },
  methods: {
    onSuccess() {
      // 验证成功
      //this.msg = '验证通过'
      this.$emit('verifyResult', '成功')
    },
    onFail() {
      // 验证失败
      this.msg = '验证不通过'
    },
    onRefresh() {
      // 验证失败自动刷新
      this.msg = ''
    },
    onFulfilled() {
      // 点击小图标刷新
      this.msg = ''
    },
    onAgain() {
      console.log('检测到非人为操作的哦！')
      this.msg = '检测到非人为操作的哦！'
    }
  }
}
</script>
<style lang="scss" scoped>
.verify {
  position: relative;
  .tip {
    position: absolute;
    bottom: 40%;
    left: 40%;
    color: #fff;
    z-index: 999;
    font-size: 0.25rem;
  }
}
</style>
